<template>
  <div class="booknav">
    <!-- <router-link to="/about"><div class="search"></div></router-link> -->
    <div class="nav">
      <ul>
        <li>
          <router-link to="/book/home" class="active">男频</router-link>
        </li>
        <li>
          <router-link to="/book/nvplist" active-class="active"
            >女频</router-link
          >
        </li>
        <li>
          <router-link to="/book/cblist" active-class="active"
            >出版</router-link
          >
        </li>
        <li>
          <router-link to="/book/fllist" active-class="active"
            >分类</router-link
          >
        </li>
        <li>
          <router-link to="/book/mflist" active-class="active"
            >免费</router-link
          >
        </li>
        <li>
          <router-link to="/book/phlist" active-class="active"
            >排行</router-link
          >
        </li>
      </ul>
    </div>
    <div class="book">
      <router-link v-if="lishi" :to="`/cs?id=${id}&title=${title}`" class="last-book" @click="getcookis">{{title}}</router-link>
      <router-link v-else to="" class="last-book" ><span @click="getcooki">无阅读记录</span></router-link>
      <router-link to="/shelf" class="shelf">书架</router-link>
    </div>
    <router-view />
    <!-- <mix-search></mix-search> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      book_cookic: [],
      lishi: false,
      id:'',
      title:''
    };
  },
  methods: {
    getcookis() {
      let datastr = localStorage.getItem("userdata");
      // console.log(datastr.bookid);
      if(datastr!==null){
      if (datastr!==undefined) {
        // console.log("huode")
        let iddata = JSON.parse(datastr);
        // console.log(iddata.cookic);
        if (iddata.cookic) {
          // console.log(iddata.cookic.length);
          let num = iddata.cookic.length;
          this.book_cookic = iddata.cookic[num - 1];
          this.id=this.book_cookic.id
          this.title=this.book_cookic.title
          this.lishi = true;
        }
      }
    }
    },
    getcooki() {
      alert("无历史记录")
    },
  },
  created() {
    this.getcookis();
  },
};
</script>
  <style lang="scss">
.booknav {
  width: 100%;
  text-align: center;
  background-color: rgb(255, 255, 255);
  .nav {
    width: 100%;
    height: 40px;
    ul {
      display: flex;
      width: 100%;
      height: 40px;
      li {
        width: 20%;
        height: 40px;
        line-height: 40px;
        // margin: 5px 8% 5px;
        position: relative;
        font-size: 17px;
        a {
          &:after {
            position: absolute;
            content: "";
            width: 0;
            height: 3px;
            bottom: -2px;
            left: 35%;
            background: black;
            border-radius: 3px;
            transition: width 0.2s;
          }
        }
      }
      .active {
        font-weight: bold;
        &:after {
          position: absolute;
          content: "";
          width: 30%;
          height: 3px;
          bottom: -2px;
          left: 35%;
          background: black;
          border-radius: 3px;
        }
      }
    }
  }
}
.book {
  border-top: 1px solid #f0f0f0;
  padding-top: 4px;
  overflow: hidden;
  font-size: 15px;
  height: 45px;
  line-height: 45px;
  margin: 0 5%;
  clear: both;
  a {
    &.last-book {
      display: block;
      float: left;
      color: #595550;
      background: url(../../static/imgs/cookietime.png) left center no-repeat;
      background-size: 15px;
      padding-left: 20px;
    }
    &.shelf {
      display: block;
      float: right;
      color: #595550;
      background: url(../../static/imgs/bookselt.png) right center no-repeat;
      background-size: 8px;
      padding-right: 12px;
    }
  }
}
</style>